<template>
  <div class="symptom-intensity">
    <div class="intensity-header">
      <h3 class="title">
        <i class="fas fa-thermometer-half"></i>
        症状严重程度评估
      </h3>
      <p class="subtitle">请根据您的实际感受进行评分</p>
    </div>

    <!-- 疼痛等级评分 -->
    <div class="pain-scale-section">
      <h4 class="section-title">
        <i class="fas fa-chart-line"></i>
        疼痛/不适程度 (0-10分)
      </h4>
      <div class="pain-scale">
        <div class="scale-labels">
          <span class="scale-label mild">轻微</span>
          <span class="scale-label moderate">中等</span>
          <span class="scale-label severe">严重</span>
        </div>
        
        <div class="scale-slider">
          <el-slider
            v-model="painLevel"
            :min="0"
            :max="10"
            :step="1"
            :show-stops="true"
            :show-tooltip="true"
            :format-tooltip="formatPainTooltip"
            @change="updatePainLevel"
            class="pain-slider"
          />
        </div>
        
        <div class="scale-numbers">
          <span 
            v-for="num in 11" 
            :key="num - 1"
            :class="['scale-number', { active: painLevel === num - 1 }]"
            @click="setPainLevel(num - 1)"
          >
            {{ num - 1 }}
          </span>
        </div>
        
        <div class="pain-description">
          <div class="current-level">
            <span class="level-text">当前等级：</span>
            <span :class="['level-value', getPainLevelClass(painLevel)]">
              {{ getPainLevelText(painLevel) }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 症状类型选择 -->
    <div class="symptom-type-section">
      <h4 class="section-title">
        <i class="fas fa-list-check"></i>
        症状类型
      </h4>
      <div class="symptom-types">
        <el-checkbox-group v-model="selectedSymptomTypes" @change="updateSymptomTypes">
          <div class="symptom-grid">
            <el-checkbox 
              v-for="symptom in symptomTypes" 
              :key="symptom.value"
              :label="symptom.value"
              :value="symptom.value"
              class="symptom-checkbox"
            >
              <div class="symptom-item">
                <i :class="symptom.icon"></i>
                <span>{{ symptom.label }}</span>
              </div>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 症状特征描述 -->
    <div class="symptom-characteristics">
      <h4 class="section-title">
        <i class="fas fa-clipboard-list"></i>
        症状特征
      </h4>
      <div class="characteristics-grid">
        <div class="characteristic-item">
          <label>疼痛性质：</label>
          <el-select 
            v-model="painNature" 
            placeholder="请选择疼痛性质"
            @change="updateCharacteristics"
            class="characteristic-select"
          >
            <el-option label="刺痛" value="stabbing" />
            <el-option label="胀痛" value="distending" />
            <el-option label="钝痛" value="dull" />
            <el-option label="绞痛" value="cramping" />
            <el-option label="烧灼痛" value="burning" />
            <el-option label="酸痛" value="aching" />
            <el-option label="跳痛" value="throbbing" />
          </el-select>
        </div>
        
        <div class="characteristic-item">
          <label>发作规律：</label>
          <el-select 
            v-model="painPattern" 
            placeholder="请选择发作规律"
            @change="updateCharacteristics"
            class="characteristic-select"
          >
            <el-option label="持续性" value="continuous" />
            <el-option label="间歇性" value="intermittent" />
            <el-option label="阵发性" value="paroxysmal" />
            <el-option label="夜间加重" value="nocturnal" />
            <el-option label="活动后加重" value="activity_related" />
          </el-select>
        </div>
        
        <div class="characteristic-item">
          <label>影响程度：</label>
          <el-select 
            v-model="impactLevel" 
            placeholder="请选择影响程度"
            @change="updateCharacteristics"
            class="characteristic-select"
          >
            <el-option label="不影响日常生活" value="no_impact" />
            <el-option label="轻微影响" value="mild_impact" />
            <el-option label="明显影响" value="moderate_impact" />
            <el-option label="严重影响" value="severe_impact" />
            <el-option label="无法正常活动" value="unable_function" />
          </el-select>
        </div>
      </div>
    </div>

    <!-- 详细描述 -->
    <div class="detailed-description">
      <h4 class="section-title">
        <i class="fas fa-comment-medical"></i>
        详细描述
      </h4>
      <el-input
        v-model="detailedDescription"
        type="textarea"
        :rows="4"
        placeholder="请详细描述您的症状，包括发生时间、诱发因素、缓解方式等..."
        @input="updateDescription"
        maxlength="500"
        show-word-limit
        class="description-textarea"
      />
    </div>

    <!-- 评估结果预览 -->
    <div class="assessment-preview" v-if="hasAssessmentData">
      <h4 class="section-title">
        <i class="fas fa-chart-pie"></i>
        评估结果预览
      </h4>
      <div class="preview-content">
        <div class="severity-indicator">
          <div class="indicator-item">
            <span class="indicator-label">严重程度：</span>
            <el-tag :type="getSeverityTagType(overallSeverity)" size="large">
              {{ getSeverityText(overallSeverity) }}
            </el-tag>
          </div>
          <div class="indicator-item">
            <span class="indicator-label">建议优先级：</span>
            <el-tag :type="getPriorityTagType(recommendedPriority)" size="large">
              {{ getPriorityText(recommendedPriority) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElSlider, ElCheckboxGroup, ElCheckbox, ElSelect, ElOption, ElInput, ElTag } from 'element-plus'

// Props
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      painLevel: 0,
      symptomTypes: [],
      painNature: '',
      painPattern: '',
      impactLevel: '',
      description: ''
    })
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'change'])

// 响应式数据
const painLevel = ref(props.modelValue.painLevel || 0)
const selectedSymptomTypes = ref(props.modelValue.symptomTypes || [])
const painNature = ref(props.modelValue.painNature || '')
const painPattern = ref(props.modelValue.painPattern || '')
const impactLevel = ref(props.modelValue.impactLevel || '')
const detailedDescription = ref(props.modelValue.description || '')

// 症状类型选项
const symptomTypes = ref([
  { label: '疼痛', value: 'pain', icon: 'fas fa-exclamation-triangle' },
  { label: '发热', value: 'fever', icon: 'fas fa-thermometer-full' },
  { label: '咳嗽', value: 'cough', icon: 'fas fa-lungs' },
  { label: '头晕', value: 'dizziness', icon: 'fas fa-dizzy' },
  { label: '恶心', value: 'nausea', icon: 'fas fa-stomach' },
  { label: '乏力', value: 'fatigue', icon: 'fas fa-tired' },
  { label: '失眠', value: 'insomnia', icon: 'fas fa-moon' },
  { label: '食欲不振', value: 'appetite_loss', icon: 'fas fa-utensils' },
  { label: '呼吸困难', value: 'dyspnea', icon: 'fas fa-wind' },
  { label: '心悸', value: 'palpitation', icon: 'fas fa-heartbeat' },
  { label: '皮疹', value: 'rash', icon: 'fas fa-hand-dots' },
  { label: '其他', value: 'other', icon: 'fas fa-ellipsis-h' }
])

// 计算属性
const hasAssessmentData = computed(() => {
  return painLevel.value > 0 || selectedSymptomTypes.value.length > 0
})

const overallSeverity = computed(() => {
  let severity = 'mild'
  
  if (painLevel.value >= 7 || impactLevel.value === 'severe_impact' || impactLevel.value === 'unable_function') {
    severity = 'severe'
  } else if (painLevel.value >= 4 || impactLevel.value === 'moderate_impact') {
    severity = 'moderate'
  }
  
  return severity
})

const recommendedPriority = computed(() => {
  if (overallSeverity.value === 'severe') return 'urgent'
  if (overallSeverity.value === 'moderate') return 'normal'
  return 'low'
})

// 方法
const formatPainTooltip = (value) => {
  return `${value}分 - ${getPainLevelText(value)}`
}

const getPainLevelText = (level) => {
  if (level === 0) return '无症状'
  if (level <= 3) return '轻微'
  if (level <= 6) return '中等'
  if (level <= 8) return '严重'
  return '极严重'
}

const getPainLevelClass = (level) => {
  if (level === 0) return 'none'
  if (level <= 3) return 'mild'
  if (level <= 6) return 'moderate'
  if (level <= 8) return 'severe'
  return 'extreme'
}

const getSeverityTagType = (severity) => {
  const types = {
    mild: 'success',
    moderate: 'warning',
    severe: 'danger'
  }
  return types[severity] || 'info'
}

const getSeverityText = (severity) => {
  const texts = {
    mild: '轻度',
    moderate: '中度',
    severe: '重度'
  }
  return texts[severity] || '未知'
}

const getPriorityTagType = (priority) => {
  const types = {
    low: 'info',
    normal: 'warning',
    urgent: 'danger'
  }
  return types[priority] || 'info'
}

const getPriorityText = (priority) => {
  const texts = {
    low: '低优先级',
    normal: '普通',
    urgent: '紧急'
  }
  return texts[priority] || '未知'
}

const setPainLevel = (level) => {
  painLevel.value = level
  updatePainLevel(level)
}

const updatePainLevel = (level) => {
  emitUpdate()
}

const updateSymptomTypes = () => {
  emitUpdate()
}

const updateCharacteristics = () => {
  emitUpdate()
}

const updateDescription = () => {
  emitUpdate()
}

const emitUpdate = () => {
  const value = {
    painLevel: painLevel.value,
    symptomTypes: selectedSymptomTypes.value,
    painNature: painNature.value,
    painPattern: painPattern.value,
    impactLevel: impactLevel.value,
    description: detailedDescription.value
  }
  
  emit('update:modelValue', value)
  emit('change', value)
}

// 监听props变化
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    painLevel.value = newValue.painLevel || 0
    selectedSymptomTypes.value = newValue.symptomTypes || []
    painNature.value = newValue.painNature || ''
    painPattern.value = newValue.painPattern || ''
    impactLevel.value = newValue.impactLevel || ''
    detailedDescription.value = newValue.description || ''
  }
}, { deep: true })
</script>

<style scoped>
.symptom-intensity {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.intensity-header {
  text-align: center;
  margin-bottom: 25px;
}

.title {
  color: #2c5aa0;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.subtitle {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.section-title {
  color: #2c5aa0;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pain-scale-section {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #2c5aa0;
}

.pain-scale {
  margin-top: 15px;
}

.scale-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.scale-label {
  font-size: 12px;
  font-weight: 500;
}

.scale-label.mild { color: #52c41a; }
.scale-label.moderate { color: #faad14; }
.scale-label.severe { color: #f5222d; }

.scale-slider {
  margin: 20px 0;
}

.pain-slider {
  --el-slider-main-bg-color: #2c5aa0;
  --el-slider-runway-bg-color: #e8f4fd;
}

.scale-numbers {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}

.scale-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #e8f4fd;
  color: #2c5aa0;
}

.scale-number:hover {
  background: #d1e9ff;
  transform: scale(1.1);
}

.scale-number.active {
  background: #2c5aa0;
  color: white;
  transform: scale(1.2);
}

.pain-description {
  text-align: center;
  margin-top: 15px;
}

.current-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.level-text {
  color: #666;
  font-size: 14px;
}

.level-value {
  font-weight: 600;
  font-size: 16px;
  padding: 4px 12px;
  border-radius: 20px;
}

.level-value.none { color: #666; background: #f0f0f0; }
.level-value.mild { color: #52c41a; background: #f6ffed; }
.level-value.moderate { color: #faad14; background: #fffbe6; }
.level-value.severe { color: #f5222d; background: #fff2f0; }
.level-value.extreme { color: #a8071a; background: #ffebee; }

.symptom-type-section {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #52c41a;
}

.symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.symptom-checkbox {
  margin: 0;
}

.symptom-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.symptom-checkbox:hover .symptom-item {
  background: #e6f7ff;
}

.symptom-characteristics {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #faad14;
}

.characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.characteristic-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.characteristic-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.characteristic-select {
  width: 100%;
}

.detailed-description {
  margin-bottom: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #722ed1;
}

.description-textarea {
  margin-top: 10px;
}

.assessment-preview {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.assessment-preview .section-title {
  color: white;
  margin-bottom: 15px;
}

.severity-indicator {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.indicator-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.indicator-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .symptom-intensity {
    padding: 15px;
  }
  
  .symptom-grid {
    grid-template-columns: 1fr;
  }
  
  .characteristics-grid {
    grid-template-columns: 1fr;
  }
  
  .severity-indicator {
    flex-direction: column;
    gap: 10px;
  }
}
</style>